<template>

  <div class="al-main-tab">
    <div class="main">
<!--      <span
        v-for="(item, index) in titles" :key="index"
        :class="`${itemType == item.key ? 'active' : ''}`"
        @click="spanTabHandler(item.key)">{{ item.label }}</span>-->


      <h3 class="title2 pt15 pb15">{{key}}</h3>
    </div>
  </div>

  <div class="pb100 main">
    <div class="al-main-box">
      <List
        item-layout="horizontal"
        :data-source="list"
        :pagination="page"
        :loading="loading"
      >
        <template #renderItem="{ item }">
          <ListItem>
            <!-- <a target="_blank" :href="`../article/${itemId}?id=${item.article_id}`" class="al-list-item">-->
            <a target="_blank" :href="`/articleDetail/${item.article_id}`"  class="al-list-item">
              <h4>{{ item.article_title }}</h4>
              <p class="nowrap">{{ item.article_summary }}</p>
            </a>
          </ListItem>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, reactive, toRefs, unref} from "vue";
import {  Row, Col, Collapse, List } from "ant-design-vue";
import { useRoute } from "vue-router";
import {getArticleListApi, getItemTreeApi} from '/@/api/theme';
import { SearchOutlined, DoubleRightOutlined } from "@ant-design/icons-vue";
import {findOneDataObj} from "/@/utils";
import {configItem} from "/@/api/common";


export default defineComponent({
  components: {
    Row,
    Col,
    Collapse,
    CollapsePanel: Collapse.Panel,
    List,
    ListItem: List.Item,
    SearchOutlined,
    DoubleRightOutlined,
  },
  setup() {
    const {params} = useRoute();
    const itemId: string = params.id as string;

    const { query } = toRefs(useRoute());
    const key = unref(query).key as string || '';

    const titles = ref<configItem[]>([
      {
        key: 'ss',
        label: 'string',
        path: 'string'
      }
    ])

    const config = reactive({
      list: [],
      loading: true,
      lanTi : '',
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        hideOnSinglePage: true,
        onChange:function (page:number){
          getItemList(page,config.lanTi)
        }
      }
    })


    const getItemTree = async () => {
      const Param = { includeSelf:false, itemId:itemId }
      let { success , data } = await getItemTreeApi(Param);
      if(success){
        let noticeObj = findOneDataObj(data,key);
        config.lanTi = noticeObj.data.itemId;
        //console.log(noticeObj)
        getItemList(1,noticeObj.data.itemId)
      }
    }

    const getItemList = (current,itemId) => {
      const Param = { current, size:10, itemId }
      getArticleListApi(Param).then(({ success , data })=>{
        if(success){
          let { total , records , current} = data;
          config.page.total = total;
          config.page.current = current;
          config.loading = false;
          if(total) config.list = records
        }
      })
    }

    const init = () => {
      getItemTree()
    };

    onMounted(init);

    return {
      ...toRefs(config) , key , titles , itemId
    };
  },
});
</script>



<style lang="less" scoped>

.al-main-box {
  .ant-list-split {
    .ant-list-item {
      padding: 0;
      border-bottom: 1px dashed #eaeaea !important;
    }
  }
}

.al-main-tab {
  height: 54px;
  border-bottom: 1px solid #eaeaea;

  span {
    position: relative;
    display: inline-block;
    padding: 0 30px;
    font-size: 15px;
    line-height: 62px;
    cursor: pointer;

    &::after {
      position: absolute;
      top: 27px;
      right: 0;
      display: inline-block;
      width: 1px;
      height: 12px;
      background: #eaeaea;
      content: "";
      user-select: none;
    }

    &.active {
      color: #0078ff;
    }

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}

.al-total {
  padding-top: 24px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
}

.al-list-item {
  flex: 1;
  position: relative;
  width: 100%;
  padding: 20px 0 20px 18px;

  h4 {
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 400;
    color: inherit;
  }

  p {
    margin-bottom: 0;
    color: #999;
  }

  &::after {
    position: absolute;
    top: 30px;
    left: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #d6d6d6;
    border-radius: 50%;
    content: "";
  }
}

</style>

